<template>
    <div class="body_bg">
        <div>
            <nav-bar title="门禁二维码" :show-back="true"/>
        </div>
        <div class="father_bg">
            <div class="child_bg">
                <div class="top_bg"></div>
                <div class="qrcode_bg">
                    <img src="../../img/qrcode.jpg" class="qrcode">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import NavBar from '../../components/navbar/NavBar.vue'
export default {
    name: 'Guard',
    components: {
        NavBar
    }
}
</script>
<style scoped>
.body_bg{width: 100%; height: 100%;}
.father_bg{width: 100%; height: 100%; background-color: #00B2EE;}
.child_bg{width: 6.4rem; height: 7.3rem; margin-left: 7.5%; position: absolute; margin-top:10%; box-shadow: 5px 8px 10px 1px rgba(0, 0, 0, 0.2);}
.top_bg{width: 100%; height: 10%; background-color: #00dcff; border-radius: 8px 8px 0px 0px;}
.qrcode_bg{width: 100%; height: 90%; background-color: white; display: flex; justify-content:center; align-items:center;}
.qrcode{width: 3.5rem; height: 3.5rem;}
</style>
